
import { getT } from "@/app/i18n";
import { PhotoCard } from "./components/PhotoCard";

export default async function HomePage({ params }: { params: Promise<{ lng: string }> }) {
	const { lng } = await params;
	const { t } = await getT("translation");
	// 假数据，后续可替换为真实接口 - 不同高度模拟真实小红书
	const posts = [
		{
			id: "1",
			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=400&fit=crop",
			alt: "山脉日落拍摄技巧分享 📸",
			author: "摄影师小明",
			device: "iPhone 15 Pro",
		},
		{
			id: "2",
			src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=300&h=500&fit=crop",
			alt: "城市夜景这样拍才有氛围感 ✨",
			author: "小红的摄影",
			device: "Sony A7M4",
		},
		{
			id: "3",
			src: "https://images.unsplash.com/photo-1511497584788-876760111969?w=300&h=350&fit=crop",
			alt: "晨雾森林 | 宫崎骏同款",
			author: "老王摄影",
			device: "Canon R6",
		},
		{
			id: "4",
			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=450&fit=crop",
			alt: "雪山湖泊 | 对称构图技巧",
			author: "阿美旅拍",
			device: "Nikon Z8",
		},
		{
			id: "5",
			src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=380&fit=crop",
			alt: "秋天调色教程 🍂 超简单",
			author: "李华工作室",
			device: "Fujifilm X-T5",
		},
		{
			id: "6",
			src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=300&h=420&fit=crop",
			alt: "公路旅行Vlog设备清单",
			author: "张伟旅行",
			device: "DJI Mavic 3",
		},
		{
			id: "7",
			src: "https://images.unsplash.com/photo-1470770903676-69b98201ea1c?w=300&h=360&fit=crop",
			alt: "日出延时摄影完整教程",
			author: "王芳摄影",
			device: "iPhone 15 Pro",
		},
		{
			id: "8",
			src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=480&fit=crop",
			alt: "热带雨林微距 | 镜头推荐",
			author: "赵强自然",
			device: "Canon EOS R5",
		},
		{
			id: "9",
			src: "https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=300&h=440&fit=crop",
			alt: "星空银河拍摄参数分享 ⭐",
			author: "孙丽星空",
			device: "Sony A7R V",
		},
		{
			id: "10",
			src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=300&h=390&fit=crop",
			alt: "极简风景摄影心得",
			author: "周杰艺术",
			device: "Nikon Z9",
		},
		{
			id: "11",
			src: "https://images.unsplash.com/photo-1418489098061-ce87b5dc3aee?w=300&h=410&fit=crop",
			alt: "北极光拍摄全攻略 🌌",
			author: "北欧旅行",
			device: "Sony A7S III",
		},
		{
			id: "12",
			src: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=300&h=470&fit=crop",
			alt: "雪山徒步 | 装备分享",
			author: "户外探险家",
			device: "GoPro Hero 12",
		},
		{
			id: "13",
			src: "https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=300&h=340&fit=crop",
			alt: "夏日海滩拍照姿势教学",
			author: "时尚博主",
			device: "iPhone 15 Pro",
		},
		{
			id: "14",
			src: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=300&h=460&fit=crop",
			alt: "咖啡店人像光线运用 ☕",
			author: "人像摄影师",
			device: "Canon R5",
		},
		{
			id: "15",
			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=385&fit=crop",
			alt: "手机拍大片技巧合集",
			author: "手机摄影",
			device: "iPhone 15 Pro",
		},
	];

	return (
		<main className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30 dark:from-gray-950 dark:via-blue-950/20 dark:to-purple-950/20">
			{/* 顶部装饰性渐变 */}
			<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
			
			<div className="mx-auto max-w-[1400px] px-4 sm:px-6 py-8">
				{/* 居中搜索框 */}
				<div className="flex justify-center mb-8">
					<div className="relative w-full max-w-2xl">
						<input
							type="search"
							placeholder={t("nav.search") || "搜索照片、设备、创作者..."}
							className="w-full rounded-2xl border-0 bg-white/80 backdrop-blur-xl px-6 py-4 pl-14 text-base shadow-lg shadow-black/5 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:shadow-xl dark:bg-gray-900/80 dark:text-white placeholder:text-gray-400"
						/>
						<svg
							className="absolute left-5 top-1/2 h-6 w-6 -translate-y-1/2 text-gray-400"
							fill="none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth={2}
								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
							/>
						</svg>
					</div>
				</div>

				{/* 瀑布流布局 - 类似小红书 */}
				<div className="
    grid gap-4
    grid-cols-[repeat(auto-fill,minmax(160px,1fr))]
    sm:grid-cols-[repeat(auto-fill,minmax(200px,1fr))]
    md:grid-cols-[repeat(auto_fill,minmax(220px,1fr))]
  "
>
					{posts.map((post) => (
						<div key={post.id} className="break-inside-avoid">
							<PhotoCard
								id={post.id}
								src={post.src}
								alt={post.alt}
								author={post.author}
								device={post.device}
								lng={lng}
								t={t}
							/>
						</div>
					))}
				</div>
			</div>
		</main>
	);
}
